import Dep from "./dep";

let id=0;


class Watcher{
    // 不同组件有不同的watcher 
    constructor(vm,fn,options){
        this.id=id++;
        this.renderWatcher = options; // 是一个渲染watcher
        this.getter=fn; // getter意味着调用这个函数可以发生取值操作
        this.deps=[];//后续我们实现计算属性，和清理工作需要用到
        this.depsId=new Set()
        this.get()
    }
    addDep(dep) { // 一个组件 对应着多个属性 重复的属性也不用记录
        let id = dep.id;
        if (!this.depsId.has(id)) {
            this.deps.push(dep);
            this.depsId.add(id);
            dep.addSub(this); // watcher已经记住了dep了而且去重了，此时让dep也记住watcher
        }
    }
    get(){
        Dep.target=this; //静态属性就是只有一份
        // debugger
        this.getter() // 会去vm上取值
        Dep.target=null; //渲染完毕就清空
    }
    update(){
        this.get() //从新更新
    }
}

export default Watcher;


// 需要给每个属性增加一个dep， 目的就是收集watcher

// 一个组件中 有多少个属性 （n个属性会对应一个视图） n个dep对应一个watcher
// 1个属性 对应着多个组件  1个dep对应多个watcher
// 多对多的关系